<template>
  <div class="t-skeleton-demo">
    <div v-for="(theme, index) in themes" :key="`theme-${index}`" class="t-skeleton-demo-card">
      <div class="header">{{ theme.label }}</div>
      <div class="content">
        <t-skeleton :theme="theme.value"></t-skeleton>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const themes = ref([
  {
    label: '文本',
    value: 'text',
  },
  {
    label: '头像',
    value: 'avatar',
  },
  {
    label: '段落',
    value: 'paragraph',
  },
  {
    label: '头像描述',
    value: 'avatar-text',
  },
  {
    label: '选项卡',
    value: 'tab',
  },
  {
    label: '文章',
    value: 'article',
  },
]);
</script>
